<template>
  <div class="leftCart">
    <!-- 个人信息卡片 -->
    <el-card>
      <div class="blockWrap">
        <el-avatar :size="50" :src="circleUrl" ></el-avatar>
        <span>{{appointmentInfo[0].name}}</span>
        <div class="footerTable">
          <div class="first">
          <span>性别:<i>{{appointmentInfo[0].sex}}</i></span>
          <span>年龄:<i>{{appointmentInfo[0].age}}</i></span>
          </div>
          <div class="second">电话:<i>{{appointmentInfo[0].phoneNumber}}</i></div>
          <div class="third">备注:<i>{{appointmentInfo[0].remark}}</i></div>
        </div>
          
      </div>
    </el-card>
    <!-- 测量的信息 -->
    <el-card class="secondCard">
      <div class="testValue">
        <span class="testValueLeft">本次测量值</span>
        <span class="el-icon-edit testValueRight" @click="complie">编辑</span>
      </div>
      <div>身高:{{appointmentInfo[0].condition.stature}}</div>
      <div>体重:{{appointmentInfo[0].condition.weight}}</div>
      <div>体温:{{appointmentInfo[0].condition.temperature}}</div>
      <div>舒张压:{{appointmentInfo[0].condition.DBP}}</div>
      <div>收缩压:{{appointmentInfo[0].condition.SBP}}</div>
    </el-card>
    <!-- 第三个卡片 -->
    <el-card class="thirdCard">
      <div>过往病史</div>
      <div v-for="(item,index) in appointmentInfo[0].history" :key="index">
        <span>{{item.name}}</span>
        <span class="timefont">{{item.date}}</span>
      </div>
      <div>
        没有更多诊断结果
        
      </div>
    </el-card>

    <!-- 弹出修改测量值的表格 -->
<el-dialog title="测量值编辑" :visible.sync="dialogEditVisible" :close-on-click-modal="false">
                <el-form label-position="left" label-width="60px" style='width: 600px; margin-left:50px;' :model="editinfo">
                  <el-form-item label="身高" prop="height">
                    <el-input v-model="editinfo.height"></el-input>
                  </el-form-item>
                  <el-form-item label="体重" prop="weight">
                    <el-input v-model="editinfo.weight"></el-input>
                  </el-form-item>
                  <el-form-item label="体温" prop="teper">
                    <el-input v-model="editinfo.teper"></el-input>
                  </el-form-item>
                  <el-form-item label="舒张压" prop="pressure">
                    <el-input v-model="editinfo.pressure"></el-input>
                  </el-form-item>
                  <el-form-item label="收缩压" prop="systolic">
                    <el-input v-model="editinfo.systolic"></el-input>
                  </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="editSubmit()">确定</el-button>
                    <el-button type="primary" @click="editReset()">重置</el-button>
                    <el-button @click="editCancel()">取消</el-button>
                  </div>
              </el-dialog>
  </div>
</template>

<script>
import {mapState,mapMutations} from "vuex"
export default {
  name: 'leftCart',
  data() {
    return {
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        form:{

        },
        formLabelWidth: '120px',
         dialogEditVisible: false,
          editinfo:{
          height:'',
          weight:'',
          teper:'',
          pressure:'',
          systolic:''
        },
    }
  },
  methods:{
    // 引入vuex中的数据
    ...mapMutations([
      "changeCondition"
    ]),
    // 点击编辑按钮
    complie(){
        this.dialogEditVisible=true
        let value = {}
        value.height = this.appointmentInfo[0].condition.stature
        value.weight = this.appointmentInfo[0].condition.weight
        value.teper = this.appointmentInfo[0].condition.temperature
        value.pressure = this.appointmentInfo[0].condition.DBP
        value.systolic = this.appointmentInfo[0].condition.SBP
        this.editinfo = value
    },
     //编辑界面里的确定提交按钮
    editSubmit(){
        this.dialogEditVisible = false;
        this.$confirm('确认提交吗？', '提示', {}).then(() => {
          // 收集表单数据
          let value = {}
          value.stature = this.editinfo.height
          value.weight = this.editinfo.weight
          value.temperature = this.editinfo.teper
          value.DBP = this.editinfo.pressure
          value.SBP = this.editinfo.systolic
          this.changeCondition(value)
         

          this.$message({
            type: 'success',
            message: '修改成功'
          });

          this.dialogEditVisible = false;
        }).catch(() => {
      
        });
      },
    // 编辑界面里面的 取消的回调
      editCancel(){
        this.dialogEditVisible = false;
      },
      // 编辑页面里面的重置的回调
       editReset() {
        this.editinfo = {
          height:'',
          weight:'',
          teper:'',
          pressure:'',
          systolic:''
        },
       this.changeCondition({
         stature:'',
          weight:'',
          temperature:'',
          DBP:'',
          SBP:''
       })
      },
 
  },
  computed:{
    ...mapState({
      appointmentInfo:state => state.appointment.appointmentInfo
    })
  }
}
</script>

<style lang="less" scoped>
.leftCart{
  .el-card{
    margin-bottom: 20px;
  }
  // 整个的外部容器
  width:308px;
    line-height: 40px;
    font-size:16px;
    margin-left: 20px;
  .blockWrap{
    display:flex;
    flex-direction: column;
    align-items: center;
  }
  .footerTable{
    padding-left: 5px;
    border:1px solid #dcdcdc;
    width:100%;
    color: #dcdcdc;

    i{
      color:black;
      margin: 0 10px;
    }
    .first{
      border-bottom:1px solid #dcdcdc;
      display: flex;
      
      span{
        width:50%;
        padding-left: 5px;
        &:nth-of-type(1){
          border-right: 1px solid #dcdcdc;
        }
      }
    }
    .second{
      border-bottom:1px solid #dcdcdc;
    }
  }
  // 第二个卡片
  .secondCard{
    color:#787c7d;
    div{
      border-bottom: 1px solid #dcdcdc;
    }
  }
  .testValue{
    color:black;
    &:after{
       content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
    }
    .testValueLeft{
      float: left;
    }
    .testValueRight{
      float:right;
      cursor:pointer;
      // display: block;
      line-height: 40px;
    }
  }
  // 
  .thirdCard{
    display:flex;
    font-size: 18px;
    flex-direction: column;
    div{
      display: flex;
      border-bottom: 1px solid #dcdcdc;
      flex-direction: column;
      .timefont{
        color: #b6b6b6 ;
        font-size: 16px;
      }
    }
  }
}
</style>
